<template>
  <div
    v-if="!initializing"
    class="vc-component vc-app-list-nav-text"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <div
      v-if="dataList && dataList.length > 0"
      class="vc-app-list-nav-text-list"
    >
      <div
        v-for="(data, index) in dataList"
        :key="index"
        class="vc-app-list-nav-text-item"
        :style="data['主键'] === currValue ? getActiveStyle() : getInactiveStyle()"
        @click="changeItem(data)" 
      >{{data["名称"]}}</div>
    </div>
    <div
      v-else
      class="vc-app-list-nav-text-empty"
      :style="visual.parseStyle(compStyle)"
    >
      <div style="margin-top: 40rpx;">暂无数据</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, getCurrentInstance, nextTick } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";

const props = defineProps({
  node: Object
});

const initializing = ref(true);
const currNode = ref(props.node);
const compStyle = ref({});
const dataList = ref([]);
const currValue = ref('');
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  compStyle.value = currNode.value.currCompStyle || {};
  dataList.value = (await visual.loadData(currNode.value.compData, eventHandler, getData()) || {}).data || []
  await nextTick(() => initializing.value = false);
};

const changeItem = (row) => {
  currValue.value = row['主键'] || '';
  eventHandler.trigger("点击事件", {"row": row});
};

const getData = () => {
  return { 
    value: currValue.value || '',
    inputParam: currNode.value.inputParam || {} 
  };
};

const getActiveStyle = () => {
  let result = '';
  if (currNode.value.currCompStyle['fontSize']) {
    result += 'font-size: ' + currNode.value.currCompStyle['fontSize'] + 'px;';
  }
  if (currNode.value.currCompStyle['activeColor']) {
    result += 'color: ' + currNode.value.currCompStyle['activeColor'] + ';';
  }
  result += 'font-weight: bolder;';
  return result;
};

const getInactiveStyle = () => {
  let result = '';
  if (currNode.value.currCompStyle['fontSize']) {
    result += 'font-size: ' + currNode.value.currCompStyle['fontSize'] + 'px;';
  }
  if (currNode.value.currCompStyle['inactiveColor']) {
    result += 'color: ' + currNode.value.currCompStyle['inactiveColor'] + ';';
  }
  return result;
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = () => {
  init();
};

onMounted(() => {
  refresh();
});

defineExpose({ getData, changeStyle, refresh });
</script>

<style scoped lang="scss">
.vc-app-list-nav-text {
  width: 100%;
  display: flex;
  flex-direction: row;
  .vc-app-list-nav-text-list {
    width: 1rpx;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: auto;
    .vc-app-list-nav-text-item {
      padding: 0 16rpx;
      white-space: nowrap;
    }
  }
  .vc-app-list-nav-text-list::-webkit-scrollbar {
    display: none;
  }
  .vc-app-list-nav-text-icon {
    width: 60rpx;
    margin-left: 20rpx;
    border-left: 1rpx solid #cccccc;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32rpx;
  }
  .vc-app-list-nav-text-empty {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.vc-app-list-nav-text-dropdown {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 16rpx 16rpx 40rpx 16rpx;
  .vc-app-list-nav-text-dropdown-item {
    min-width: 130rpx;
    height: 70rpx;
    background-color: #F5F6FA;
    border-radius: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>